import React, { useEffect, useState } from "react"
import { NavBar, SearchBar, List, IndexBar, Card, Tag } from "antd-mobile"
import http from "../../utils/http"
import { EnvironmentOutline } from "antd-mobile-icons"
import "./index.css"
import { useDispatch } from "react-redux"
import { setCitySlect } from "../../store/citySlice"
function Index() {
  // 接受请求过来的数据
  const [hotCity, setHotCity] = useState([])
  const [city, setCity] = useState([])
  const [searchCity, setSearchCity] = useState([])
  const [flag, setFlag] = useState(true)
  const dispathch = useDispatch()
  async function getCityData() {
    const result = await http.get("/city")
    console.log(result)
    const { data, code } = result.data
    if (code === 200) {
      setCity(data.city)
      setHotCity(data.hotCities)
    }
  }
  const handelSearch = async wd => {
    setFlag(false)
    const result = await http.get("/city/search", { params: { wd } })
    const { code, data } = result.data
    if (code === 200) {
      setSearchCity(data)
    }
  }
  // 存储数据到仓库
  const handleStore = city => {
    dispathch(setCitySlect({ city }))
  }
  useEffect(() => {
    getCityData()
  }, [])
  return (
    <div>
      <NavBar style={{ background: "#00a8bc", color: "#fff" }}>
        <SearchBar
          onChange={e => handelSearch(e)}
          searchIcon={null}
          placeholder="城市车站的中文或拼音"
          onClear={() => setFlag(true)}
        />
      </NavBar>
      {flag && (
        <div className="post">
          当前定位:
          <EnvironmentOutline />
          北京
        </div>
      )}
      {flag && (
        <Card title="热门" style={{ background: "#eeeeee" }}>
          <div className="hot_city">
            {hotCity.length > 0 &&
              hotCity.map((item, index) => (
                <Tag
                  onClick={() => handleStore(item.name)}
                  color="#fff"
                  key={index}
                  style={{ color: "#000", height: 30, alignItems: "center" }}>
                  {item.name}
                </Tag>
              ))}
          </div>
        </Card>
      )}
      {flag && (
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {city.length > 0 &&
              city.map(group => {
                const { initial, list } = group
                return (
                  <IndexBar.Panel index={initial} title={initial} key={initial}>
                    <List>
                      {list.map((item, index) => (
                        <List.Item
                          onClick={() => handleStore(item.name)}
                          key={index}>
                          {item.name}
                        </List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                )
              })}
          </IndexBar>
        </div>
      )}
      {searchCity.length > 0 && (
        <List>
          {searchCity.map((item, index) => (
            <List.Item
              style={{ background: "#eee" }}
              key={index}
              onClick={() => handleStore(item.name)}>
              {item.name}
            </List.Item>
          ))}
        </List>
      )}
    </div>
  )
}

export default Index
